*{
    margin:0 auto;
    padding:0;
}
$font-size:12px;
ul,li{
    list-style:none;
}
a{
    text-decoration:none;
}
.fl{
    float:left;
}
.fr{
    float:right;
}
.cc{
    color:#ccc;
}
#tousu{
    width:600px;
    height:150px;
    background:linear-gradient(180deg,white,#f2f2f2);
    position:absolute;
    top:0;
    left:0;
    right:0;
    top:200px;
    z-index: 99;
    display:none;
    h4{
        width:600px;
        height:30px;
        border-bottom:1px solid #ccc;
        margin-left:5px;
    }
    .tou-a{
        width:600px;
        height:60px;
        text-align:center;
        line-height:40px;
    }
    button{
        width:60px;
        height:30px;
        background:#ADADAD;
        border-radius:5px;
        border:1px solid #ccc;
        outline:none;
        border:none;
        text-align:center;
        margin-left:280px;
        margin-top:-25px;
    }
}
.jianyi{
    cursor:pointer;
}
#yinying{
    width:100%;
    height:5000px;
    background:rgba(0,0,0,0.4);
    z-index:99;
    position:absolute;
    top:0;
    display:none;
}
#head{
    width:100%;
    height:33px;
    background:#f2f2f2;
    border-bottom:1px solid #ccc;
    font-size:$font-size;
    position:relative;
    #header{
        width:1200px;
        height:33px;
        line-height:33px;
        p{
            width:240px;
            height:20px;
//          background:pink;
           a{
               color:green;
           }
        }
        ul{
           display:flex;
           width:560px;
           float:right;
           color:red;
           a{
               color:black;
               text-decoration:none;
                text-align:center;
           }
        }
    }
}
#h-1{
    width:400px;
    height:200px;
    background:#f2f2f2;
    position:absolute;
    top:34px;
    left:100px;
    display:none;
    z-index:100;
    color:#999;
    #h1-a{
        width:400px;
        height:30px;
        display:flex;
        justify-content:space-between;
        p{
            width:80px;
            height:20px;
            line-height:30px;
            font-size:13px;
            font-weight:900;  
            margin-left:25px;
        }
        input[type="button"]{
            width:60px;
            height:20px;
            margin-top:4px;
            margin-right:26px;
            border:none;
        }
    }
    #h1-b{
        width:360px;
        height:160px;
        border:1px solid #ccc;
        background:white;
        line-height:23px;
    }
}
#denglu{
    width:600px;
    height:400px;
    position:absolute;
    top:100px;
    left:0;
    right:0;
    bottom:0;
    z-index:99;
//  background:red;
    color:black;
    display:none;
    .deng-a{
      width:600px;
      height:60px; 
      border-bottom:1px solid #f2f2f2;
      background:linear-gradient(180deg,skyblue,white);
       h4{
          color:white;
          padding-left: 20px;
          width:200px;
          float:left;
          line-height:40px;
      }
       p{
          font-size:25px;
          float:right;
          padding-right:20px;
          cursor:pointer;
          color:#8C8C8C;
          width:80px;
          height:50px;
          line-height:40px;
          a{
              color:#8C8C8C;
              width:80px;
              padding: 0 5px;
              margin-top:10px;
              &:hover{
                  border:1px solid #E7E7E7;
                  color:coral;
              }
            }
        }
    }
    .deng-b{
        width:600px;
        background:white;
        height:280px;
        border-bottom:1px solid #f2f2f2;
        p{
           padding-top:20px;
           padding-left:100px;
             span{
                width:100px;
                height:30px;
                display:inline-block;
                margin-left:20px;
            }
            input[type="text"]{
                width:250px;
                height:30px;
                border-radius:5px;
                outline:none;
            }
        }
        button{
            width:350px;
            height:30px;
            background:#67B168;
            outline:none;
            border:none;
            margin-left:120px;
            border-radius:5px;
            margin-top:10px;
            color:white;
        }
       
    }
    .deng-c{
        width:600px;
        height:60px;
        background:white;
        font-size:13px;
        text-align:center;
        line-height:60px;
    }
}
#zhuce{
    width:600px;
    height:400px;
    background:linear-gradient(180deg,skyblue,white);
    position:absolute;
    top:100px;
    left:0;
    right:0;
    bottom:0;
    z-index:99;
    color:black;
//  position:relative;
    display:none;
    .zhu-a{
      width:600px;
      height:40px; 
      border-bottom:1px solid #f2f2f2;
//    display:flex;
//    align-items:center;
      h4{
          color:white;
          padding-left: 20px;
          width:200px;
          float:left;
      }
      p{
          font-size:25px;
          float:right;
          padding-right:20px;
          cursor:pointer;
          color:#8C8C8C;
          width:80px;
          height:50px;
          a{
              color:#8C8C8C;
              width:80px;
              padding: 0 5px;
              &:hover{
                  border:1px solid #E7E7E7;
                  color:coral;
              }
          }
      }
    }
    .zhu-b{
        width:600px;
        height:360px;
        .zhu-left{
            width:170px;
            height:360px;
            border-right:1px solid #f2f2f2;
            float:left;
            p{
                width:160px;
                height:30px;
                font-size:16px;
                text-align:center;
                padding-top:20px;
            }
        }
        .zhu-right{
            width:430px;
            height:360px;
            float:right;
//          background:pink;
            p{
                padding-left: 50px;
                padding-top:20px;
                    span{
                        width:100px;
                        height:30px;
                        display:inline-block;
                        margin-left:10px;
                    
                }
                input[type="text"]{
                    width:180px;
                    border:14.5px;
                    outline:none;
                }
            }
            
        }
        button{
            width:300px;
            height:30px;
            position:absolute;
            bottom:40px;
            right:80px;
            background:#67B168;
            outline:none;
            border:none;
            border-radius:10.5px;
        }
    }
}
#h-2{
    width:70px;
    height:60px;
    position:absolute;
    background:white;
    border:1px solid black;
    right:215px;
    top:5px;
    text-align:center;
    line-height:20px;
    display:none;
}
#logo{
    width:1200px;
    img{
        float:left;
    }
    ul{
        width:640px;
        display:flex;
        float:right;
        position:relative;
        li{
            font-size:18px;
            line-height:80px;
            
            a{
                width:102px;
                height:38px; 
                display:inline-block; 
                text-align:center;
                color:black;
            } 
             &:hover{
                    background:#ccc;
                }
        }
    }
    .logo-img{
        position:absolute;
        right:600px;
        top:60px;
    }
}

#pic{
    width:1200px;
    height:340px;
    margin-top:90px;
    position:relative;
    .list-one{
        width:235px;
        height:340px;
        background:rgba(0,0,0,0.9);
        position:absolute;
        left:0;
        top:10px;
//      position:relative;
        >li{
            width:235px;
            height:85px;
            border-bottom:1px solid #ccc;
            color:white;
            font-size:15px;
            
            img{
                margin-left:15px;
                margin-right:15px;
            }
           &:hover{
               background:#67B168;
           } 
        }
    }
}
.list{
    width:800px;
    height:340px;
    background:#f2f2f2;
    position:absolute;  
    top:0;
    left:235px; 
    z-index:99;
    display:none;
    li{
        width:750px;
        height:35px;
//      background:red;
        color:#999;
        line-height:60px;
        border-bottom:1px solid #EEEEEE;
        font-size:$font-size;
        span{
            width:150px;
            height:35px;
            margin-right:30px;
            text-align:right;
            display:inline-block;
        }
        a{
            color:#999;
        }
    }
}
#tu{
    width:100%;
    height:978px;
    background:#f2f2f2;
    margin-top:10px;
    color:#999;
    #tu1{
        width:1200px;
        height:167px;
        display:flex;
    }
    #tu2{
        width:1200px;
        height:301px;
        display:flex;
        background:white;
        #tu2-a{
            width:200px;
            height:301px;
        }
        ul{
            width:1000px;
            height:301px;
            display:flex;
             li{
               width:199px;
               height:301px; 
               text-align:center;
               padding-top:50px;
               border-right:1px solid #f2f2f2;
               p{
                   margin-top:15px;
               }
               img{
                   height:160px;
               }
            }
        } 
    }
    #tu3{
        width:1200px;
        height:301px;
        display:flex;
        background:white;
         #tu3-a{
            width:200px;
            height:301px;
        }
        ul{
            display:flex;
            width:1000px;
            height:301px;
            li{
               width:199px;
               height:301px; 
               text-align:center;
               padding-top:50px;
               border-right:1px solid #f2f2f2;
               p{
                   margin-top:12px;
               } 
               img{
                  height:160px;
               }
            }
        }
    }
}
#tu h2{
    width:1200px;
    height:46px;
//  text-align:left;
}
#main{
    width:1200px;
    height:1024px;
//  background:pink;
    position:relative;
    color:#999;
    #main1{
        width:890px;
        height:42px;
//      background:red;
        position:relative;
        margin-top:20px;
       #city{
           width:142px;
           height:42px;
           background:white;
           border:none;
           border:1px solid #5CB85C;
           outline:none;  
       }
       #biao1{
           position:absolute;
           left:100px;
           top:12px;
           width:20px;
           height:20px;
           cursor: pointer;
       }
       #qu{
           width:142px;
           height:42px;
           background:white;
           border:none;
           border:1px solid #5CB85C;
           outline:none;  
       }
       #biao2{
           position:absolute;
           left:260px;
           top:12px;
           width:20px;
           height:20px;
           cursor:pointer;
       }
       #main-a{
           width:598px;
           height:40px;
           border:1px solid green;
           float:right;
           
           input[type="text"]{
               width:476px;
               height:40px;
               outline:none;
               float:left;
           }
           input[type="button"]{
               width:120px;
               height:40px;
               float:left;
               background:#3C763D;
               color:white;
               border:none;
               outline:none;
               font-size:17px;
           }
       }
      
    }
    
}
 #hid1{
    width:400px;
    height:200px;
    background:#f2f2f2;
    position:absolute;
    top:62px;
    display:none;
    z-index:99;
    #hid-a{
        width:400px;
        height:30px;
        display:flex;
        justify-content:space-between;
        p{
            width:80px;
            height:20px;
            line-height:30px;
            font-size:13px;
            font-weight:900;  
            margin-left:25px;
        }
        input[type="button"]{
            width:60px;
            height:20px;
            margin-top:4px;
            margin-right:26px;
            border:none;
        }
    }
    #hid-b{
        width:360px;
        height:160px;
        border:1px solid #ccc;
        background:white;
        line-height:23px;
    }
}
#hid2{
    width:400px;
    height:150px;
    background:#f2f2f2;
    position:absolute;
    top:62px;
    left:146px;
    display:none;
    z-index:99;
    #hid2-a{
        width:400px;
        height:30px;
        display:flex;
        justify-content:space-between;
         p{
            width:80px;
            height:20px;
            line-height:30px;
            font-size:13px;
            font-weight:900;  
            margin-left:25px;
        }
         input[type="button"]{
            width:60px;
            height:20px;
            margin-top:4px;
            margin-right:26px;
            border:none;
        }
    }
     #hid2-b{
        width:360px;
        height:110px;
        border:1px solid #ccc;
        background:white;
        line-height:28px;
        padding-left:10px;
    }  
}
#hid3{
    width:480px;
    height:30px;
    border:1px solid #ccc;
    position:absolute;
    top:62px;
    left:290px;
    line-height:30px;
    color:#999;
    display:none;
    background:white;
    z-index:99;
}
#main2{
    width:890px;
    height:44px;
    background:#f2f2f2;
    clear:both;
    float:left;
    margin-top:8px;
    position:relative;
     ul{
        float:left;
        width:480px;
        display:flex;
        li{
            width:120px;
            height:44px;
            line-height:44px;
            text-align:center;
        }
    }
}
.map{
    width:100px;
    height:35px;
    background:white;
    position:absolute;
    right:50px;
    line-height:30px;
    font-size:15px;
    top:5px;
    text-align:center;
    cursor:pointer;
}
 
#main3{
    width:890px;
    height:755px;
//  background:green;
    float:left;
    clear:both;
    margin-top:15px;
    .main3-a{
        width:890px;
        height:755px; 
        
        li{
            width:890px;
            height:153px;
            border-bottom:1px solid #f2f2f2;
            &:hover{
                background:#f2f2f2;
            }
        }
        .tu{
            width:130px;
            height:120px;
            border:1px solid #ccc;
            float:left;
            margin-top:6px;
            img{
                width:100%;
                height:100%;
            }
        }
        .zhong{
            width:390px;
            height:153px;
//          background:skyblue;
            float:left;
            line-height:20px;
            margin-top:5px;
            margin-left:10px;
        }
        .you{
            width:190px;
            height:153px;
            float: left;
            margin-left:50px;
            line-height:20px;
            margin-top:5px;
            
        }
        .open{
            width:90px;
            height:30px;
            border:1px solid green;
            float:right;
            margin-top:40px;
            display:none;
            margin-right:5px;
            a{
                display:inline-block;
                color:green;
                font-size:15px;
                text-align:center;
                width:90px;
                height:30px;
                margin-top:3px;
            }
        }
    }
}
#main-right{
    width:268px;
    height:755px;
//  background:red;
    margin-top:-42px;
    .mr1{
        width:268px;
        height:44px;
        background:#f2f2f2;
        p{
            font-size:20px;
            line-height:44px;
            text-align:center;
        }
    }
    .mr2{
        width:268px;
        height:711px;
//      background:green;
        li{
            width:268px;
            height:102px;
            border:1px solid #f2f2f2;
            display:flex;
            align-items:center;
            .mr2-a{
                font-size:26px;
                color:red;
                margin-left:20px;
            }
            .mr2-b{
                width:70px;
                height:70px;
                margin-left:20px;
                img{
                    width:100%;
                    height:100%;
                }
            }
            .mr2-c{
                margin-left:20px;
                width:90px;
                height:100px;
                margin-top:30px;
            }
        }
    }
}
.lv{
    color:#398439;
}
#foot{
    width:100%;
    height:300px;
    background:#f2f2f2;
    #foot-a{
        width:1200px;
        height:300px;
//      background:red;
        ul{
            height:155px;
            display:flex;
            border-bottom:1px solid #ccc;
            li{
                width:196px;
                height:134px;
//              background: pink;
                display:flex;
                .foota-1{
                    margin-top:10px;
                    width:43px;
                    height:50px;
                }
                .foota-2{
                    margin-right:20px;
                    color:#999;
                    h3{
                        color:black;
                    }
                }
            }    
        }
    }
    #foot-b{
        width:500px;
        height:150px;
        text-align:center;
        line-height:35px;
        color:#999;
    }
}
#mengban{
    width:600px;
    height:420px;
    background:white;
    display:none;
    position:fixed;
    top:40px;
    left:0;
    right:0;
    bottom:0;
    z-index:99;
}
#container{
    height:350px;
    width: 600px;
 
    
    
    #c-a{
        width:600px;
        height:30px;
        background:#f2f2f2;
        position:absolute;
        z-index:99;
        left:0; 
        top:0;
        font-size:30px;
        display:flex;
        color:#999;
        h4{
            float:left;
        }
        p{
            margin-top:-8px;
            padding:0 5px; 
            &:hover{
                padding:0 5px;
            }
        }
    }
}
.page2{
    position:absolute;
    right:-755px;
    top:365px;
}
